<!-- echarts的图表组件 -->
<template>
	<view class="echarts-wrap">
		<mpvue-echarts class="ec-canvas" @onInit="initChart" :canvasId="canvasId" ref="chart" />
	</view>
</template>

<script>
	import * as echarts from 'echarts';
	import mpvueEcharts from './mpvue-echarts/src/echarts.vue';

	export default {
		props: {
			echartsOption: {
				required: true,
				type: Object,
				default () {
					return {};
				},
			},
			canvasId: {
				type: String,
				default: 'line'
			}
		},
		components: {
			mpvueEcharts
		},
		methods: {
			initChart(e) {
				let {
					width,
					height
				} = e;
				let canvas = this.$refs.chart.canvas;

				const defaultOption = {
					xAxis: {
						type: 'category',
						data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun',
							'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
							'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun',
							'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun',
							'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun',
							'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon',
							'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed',
							'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri',
							'Sat', 'Sun'
						]
					},
					yAxis: {
						type: 'value'
					},
					axisPointer: {
						show: true
					},
					series: [{
						data: [820, 932, 901, 932, 901, 934, 1290, 1330, 1320, , 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 932, 901, 934, 1290, 1330, 1320, ,
							932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 932, 901, 934, 1290, 1330, 1320, ,
							932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 932, 901, 934, 1290, 1330, 1320, ,
							932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 932, 901, 934, 1290, 1330, 1320, ,
							932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 932, 901, 934, 1290, 1330, 1320, ,
							932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290,
							1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330,
							1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320, 932,
							901, 934, 1290, 1330, 1320, 932, 901, 934, 1290, 1330, 1320
						],
						type: 'line',
						smooth: true
					}]
				};

				echarts.setCanvasCreator(() => canvas);
				let chart = echarts.init(canvas, null, {
					width: width,
					height: height
				});
				canvas.setChart(chart);
				// console.log('echarcts的初始化配置项：', this.echartsOption);
				chart.setOption({}); // 预先设置个空图表
				chart.setOption(defaultOption); // 设置默认配置
				// chart.setOption(this.echartsOption); // 自定义配置

				chart.getZr().on('mousemove', params => {
					const pointInPixel = [params.offsetX, params.offsetY];
					if (chart.containPixel('grid', pointInPixel)) {
						// 可以用作原始数据的数组索引
						let xIndex = chart.convertFromPixel({
							seriesIndex: 0
						}, [params.offsetX, params.offsetY])[0];
						// console.log('xIndex', xIndex)
					}
				});

				// 赋值chart对象到echarts.vue中的this.chart
				this.$refs.chart.setChart(chart);
			}
		}
	}
</script>

<style scoped>
	.echarts-wrap {
		width: 100%;
		height: 300px;
	}
</style>
